<template>
  <div :class="['layout', { 'dark-mode': isDarkMode }]">
    <div class="sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <button @click="toggleSidebar">切换菜单</button>
      <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
        <li><router-link to="/restaurants">餐厅列表</router-link></li>
        <li><router-link to="/menu">菜单</router-link></li>
        <li><router-link to="/orders">订单管理</router-link></li>
        <li><router-link to="/users">用户管理</router-link></li>
      </ul>
    </div>
    <div class="main-content">
      <div class="theme-toggle">
        <button @click="toggleDarkMode">切换模式</button>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isDarkMode = ref(false)
const isSidebarCollapsed = ref(false)

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
}

const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background: #f0f0f0;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}

.main-content {
  flex: 1;
  padding: 20px;
  background: #fff;
}

.dark-mode .sidebar {
  background: #333;
  color: #fff;
}

.dark-mode .main-content {
  background: #222;
  color: #fff;
}

.theme-toggle {
  margin-bottom: 20px;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
  .sidebar.collapsed {
    width: 100%;
  }
}
</style>
